<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/static/backstage/H-ui/static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/backstage/H-ui/static/h-ui.admin/css/H-ui.admin.css"/>
    <%-- 富文本编辑器 --%>
    <link rel="stylesheet" type="text/css" href="/static/backstage/kindeditor/themes/default/default.css"/>
    <link rel="stylesheet" type="text/css" href="/static/backstage/kindeditor/plugins/code/prettify.css"/>
    <title>添加文章</title>
</head>
<body>
<article class="page-container">
    <form class="form form-horizontal">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>标题：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input id="title" type="text" class="input-text">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>大菜单：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <span class="select-box" style="width:150px;">
                    <select class="select" size="1" id="maxMenu-select">
                        <c:forEach var="maxMenu" items="${maxMenuList}">
                            <option value="${maxMenu.maxId}">${maxMenu.maxName}</option>
                        </c:forEach>
                    </select>
                </span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>小菜单：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <span class="select-box" style="width:150px;">
                    <select class="select" size="1" id="minMenu-select">
                        <c:forEach var="minMenu" items="${minMenuList}">
                            <option value="${minMenu.minId}">${minMenu.minName}</option>
                        </c:forEach>
                    </select>
                </span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>文章内容：</label>
            <div class="formControls col-xs-8 col-sm-9">
                 <textarea id="editor_id" name="content"
                           style="width:100%;height:400px;visibility:hidden;"></textarea>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input id="add-btn" class="btn btn-primary radius" type="button" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<script src="/static/backstage/H-ui/lib/jquery/1.9.1/jquery.min.js"></script>
<script src="/static/backstage/H-ui/lib/layer/2.4/layer.js"></script>
<script src="/static/backstage/kindeditor/kindeditor-all.js"></script>
<script src="/static/backstage/kindeditor/lang/zh-CN.js"></script>
<script>
    // 选择大菜单
    $("#maxMenu-select").on("click", "option", function () {
        let maxMenuId = $(this).val();
        $.post("/backstage/info/selectMinMenuNameByMaxId", {id: maxMenuId}, function (data) {
            let html = '';
            for (let i = 0; i < data.length; i++) {
                html += '<option value="' + data[i].minId + '">' + data[i].minName + '</option>';
            }
            $("#minMenu-select").html(html);
        });
    });

    KindEditor.ready(function (K) {
        window.editor = K.create('#editor_id');

        var options = {
            filterMode: true
        };
        var editor = K.create('textarea[name="content"]', options);
        // 取得HTML内容
        html = editor.html();
    });
</script>

<script>
    $("#add-btn").click(function () {
        // 收集参数
        let title = $("#title").val().trim();
        let content = editor.html();
        let maxId = $("#maxMenu-select").find("option:selected").val();
        let minId = $("#minMenu-select").find("option:selected").val();

        // 表单验证
        if (title == "") {
            layer.msg("标题不能为空", {icon: 5, time: 1000});
            return;
        }

        $.post("/backstage/info/add", {
            title: title,
            content: content,
            maxId: maxId,
            minId: minId
        }, function (data) {
            if (data.code == "1") {
                // 添加成功
                window.parent.location.reload();//刷新父页面
                let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
            } else {
                layer.msg(data.message, {icon: 5, time: 1000});
            }
        });
    });
</script>
</body>
</html>